<template>
  <a-modal
    :width="800"
    v-model="visible"
    :title="title"
    @ok="handleOk"
    okText="确定"
    cancelText="取消"
    :destroyOnClose="true"
    :maskClosable="false"
  >
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="任务名称">
        <a-input v-model="form.name" />
      </a-form-model-item>
      <a-form-model-item label="备注">
        <a-textarea :auto-size="{ minRows: 3, maxRows: 5 }" v-model="form.remark" />
      </a-form-model-item>

      <a-form-model-item label="选择待评测的模型">
        <a-table size="small" :columns="columns" :data-source="form.modals" :pagination="false">
          <template slot="resource" slot-scope="text, record">
            <a-select
              style="width: 160px"
              :options="resourceOptions"
              @change="(value) => handleResChange(value, record)"
              v-model="record.resource"
            ></a-select>
          </template>
          <template slot="modal" slot-scope="text, record">
            <a-cascader
              style="width: 240px"
              :options="modalOptions"
              placeholder="请选择内置大模型"
              v-model="record.modal"
            />
          </template>
          <template slot="action" slot-scope="text, record">
            <a>删除</a>
          </template>
        </a-table>
        <a-button type="link" icon="plus" @click="handleAddModal">添加</a-button>
      </a-form-model-item>
      <a-form-model-item label="评测结果保存路径">
        <a-input v-model="form.result" />
      </a-form-model-item>
      <a-form-model-item label="标签">
        <a-select style="width: 160px" :options="labelOptions" v-model="form.labels"></a-select>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      visible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      columns: [
        {
          title: '模型来源',
          scopedSlots: { customRender: 'resource' },
        },
        {
          title: '选择模型',
          scopedSlots: { customRender: 'modal' },
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
        },
      ],
      resourceOptions: [{ label: '内置大模型', value: '1' }],
      modalOptions: [
        {
          value: 'Llama3.1',
          label: 'Llama3.1',
          children: [
            {
              value: 'llama3.1_8b_chat',
              label: 'llama3.1_8b_chat',
            },
            {
              value: 'llama3.1_70b_chat',
              label: 'llama3.1_70b_chat',
            },
          ],
        },
        // ... 其他模型选项保持不变 ...
      ],
      labelOptions: [
        { label: '标签1', value: 'tag-1' },
        { label: '标签2', value: 'tag-2' },
      ],
      form: {
        name: '',
        remark: '',
        result: '',
        modals: [],
        labels: [],
      },
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form)
    },
    handleOk() {
      // 表单验证
      if (!this.form.name.trim()) {
        this.$message.error('请输入任务名称')
        return
      }

      if (this.form.modals.length === 0) {
        this.$message.error('请至少添加一个待评测模型')
        return
      }

      // 检查每个模型是否都已选择
      const invalidModal = this.form.modals.some((item) => !item.resource || !item.modal?.length)
      if (invalidModal) {
        this.$message.error('请完善模型信息')
        return
      }

      if (!this.form.result.trim()) {
        this.$message.error('请输入评测结果保存路径')
        return
      }

      const now = new Date()
      const createTime =
        now.getFullYear() +
        '-' +
        String(now.getMonth() + 1).padStart(2, '0') +
        '-' +
        String(now.getDate()).padStart(2, '0') +
        ' ' +
        String(now.getHours()).padStart(2, '0') +
        ':' +
        String(now.getMinutes()).padStart(2, '0') +
        ':' +
        String(now.getSeconds()).padStart(2, '0')

      // 构建提交数据
      const params = {
        id: Date.now(),
        name: this.form.name.trim(),
        remark: this.form.remark.trim(),
        result: this.form.result.trim(),
        modals: this.form.modals.map((item) => ({
          resource: item.resource,
          modal: item.modal,
        })),
        labels: this.form.labels,
        createTime: createTime,
        progress: 0,        // 初始进度为0%
        status: '进行中',   // 使用中文状态
      }

      // 临时模拟API调用
      this.$message.success('创建成功')
      this.$emit('success', params)
      this.resetForm()
    },
    resetForm() {
      this.form = {
        name: '',
        remark: '',
        result: '',
        modals: [],
        labels: [],
      }
      this.visible = false
    },
    showModal(record) {
      this.visible = true
      this.title = '新建任务'
    },
    closeModal() {
      this.resetForm()
    },
    handleAddModal() {
      this.form.modals.push({
        id: Date.now(),
        resourece: '',
        modal: [],
      })
    },
    handleResChange(e, row) {
      console.log(e, row)
    },
  },
}
</script>

<style lang="less" scoped></style>
